<template>
  <view class="assessIndex">
    <view class="top">
      <view class="tips">
        用户可通过本功能评估了解未来生活可能的健康风险点，是降低大病发生的有效手段，建议每月评估一次。
      </view>
      <view class="logoMan"><img :src="require('../images/icons/assessMan.png')" /></view>
      <view class="bgImg"><img :src="require('../images/icons/assessBg.png')" /></view>
    </view>
    <view class="bigBox">
      <!-- <view class="bigImg">
        <img :src="require('./../images/assessCarindex.png')" />
      </view> -->
      <view class="family-wrapper">
        <view class="title">请选择家庭成员</view>
        <view class="family">
          <view class="family-content">
            <!-- <view class="family-line"></view> -->
            <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="familyScrollLeft">
              <view class="f-inner">
                <view
                  v-for="(item, index) in familyList"
                  :key="index"
                  :class="['f-item', familyIndex === index ? 'active' : '']"
                  @click="changePerson(index, item.relation, item.memberId)"
                >
                  <view
                    :class="[
                      'f-logo',
                      item.relation === 1 ? 'f-logo-self' : '',
                      index % 2 === 0 ? 'f-b-imgw-boy' : 'f-b-imgw-girl'
                    ]"
                  >
                    <image :src="item.src" :title="item.memberName" class="f-logo-img" />
                  </view>
                  <view :class="['f-name', familyIndex === index ? 'active' : '']">{{ item.memberName }}</view>
                  <!-- <view v-if="familyIndex === index" class="f-san"></view> -->
                </view>
                <view class="f-add">
                  <view class="f-a-btn" @click="helpFamilyJoin">
                    <image :src="addPng" alt="添加家人" />
                  </view>
                  <view class="f-a-title">新增</view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <view class="uni-btn-v">
        <button @click="assessStart">开始评估</button>
      </view>
      <view class="uni-tip">本评估功能结果仅供您参考</view>
    </view>
  </view>
</template>

<script>
/* eslint-disable no-invalid-this */
// import { getAssessmentReportsInfo } from '@/api/assessQuestion';
// import { setDataVal } from './healthData';

import { getFamilyData } from '@/api/service.js';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      optionSex: '',
      optionRelation: '',
      patientId: '',
      userInfo: {},
      familyList: [],
      familyIndex: 0,
      addPng:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/add.png',
      focusPatientId: '',
      familyScrollLeft: 0
    };
  },

  onLoad: function (option) {
    this.patientId = this.$store.state.join.patientid;
    try {
      this.userInfo = JSON.parse(wx.getStorageSync('rawData'));
    } catch (e) {
      console.log('e:', e);
    }
    this.getFamilyList();

    if (option && option.focusPatientId) {
      console.log('option:', option);
      this.focusPatientId = option.focusPatientId;
    }

    // if (option && option.patientId) {
    //   this.patientId = option.patientId;
    //   this.optionSex = Number(option.sex) || '';
    //   this.optionRelation = Number(option.relation) || '';
    // } else {
    //   // patientId=29dc1b31e8f04eee87cedf8bb8b9817e&id=60b0469968c137567cf19661
    // }
    // console.log(34, this.optionSex, this.optionRelation);
  },
  computed: {
    ...mapGetters(['assessForm'])
  },
  methods: {
    initPageData() {
      this.$store.commit('assessQuestion/SET_ACTIVE', 0);
      this.$store.commit('assessQuestion/SET_AJAXRES', false);

      let storeData = this.assessForm;
      Object.keys(storeData).forEach((key) => {
        storeData[key] = '';
      });
      this.$store.commit('assessQuestion/SET_ASSESSFORM', storeData);
    },
    assessStart() {
      let selectedPatient = this.familyList[this.familyIndex];
      // 开始评估
      this.$store.commit('assessQuestion/SET_ACTIVE', 0);
      this.$store.commit('assessQuestion/SET_AJAXRES', false);
      console.log('selectedPatient:', selectedPatient.insuredId);
      this.$store.commit('assessQuestion/SET_ASSESSPATIENTID', selectedPatient.insuredId);
      // this.$wxPromise.navigateTo({
      //   url: '/pagesB/assessSick/assessPage'
      // });

      // let selectedPatient = this.familyList[this.familyIndex];
      this.$wxPromise.navigateTo({
        url: `/pagesB/cardiovascularAssess/assessList?patientId=${selectedPatient.insuredId}&relation=${selectedPatient.relation}&sex=${selectedPatient.sex}`
      });
    },
    changePerson(index, relation, memberId) {
      this.familyIndex = index;
    },
    helpFamilyJoin() {
      // 帮家人加入
      this.$wxPromise.navigateTo({
        url: '/pagesC/familyMember/editOrAdd'
      });
      // getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
      //   if (res.code === 0 && res.data.realNameAuthenticationPassed === 1) {
      //     this.$wxPromise.navigateTo({
      //       url: '/pages/join/form?fromPage=1'
      //     });
      //   } else {
      //     this.$wxPromise.navigateTo({
      //       url: '/pagesC/familyMember/editOrAdd'
      //     });
      //   }
      // });
    },
    getFamilyList() {
      let patientId = this.patientId;
      getFamilyData(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户关系列表失败' });
          return;
        }
        const newUserInfo = [
          {
            relation: 1,
            patientId: patientId,
            insuredId: patientId,
            memberId: patientId,
            sex: null,
            status: null
          }
        ];
        let resDataOrigin = res.data.length > 0 ? res.data : newUserInfo;
        // 对家庭组进行排序，本人、父母、配偶、子女
        let familySort = [1, 3, 2, 4];
        let resData = [];
        let resObj = {};
        resDataOrigin.forEach((fData) => {
          let relation = fData.relation;
          if (resObj[relation]) {
            resObj[relation].push(fData);
          } else {
            resObj[relation] = [fData];
          }
        });
        familySort.forEach((fIndex) => {
          if (resObj[fIndex]) {
            resData = resData.concat(resObj[fIndex]);
          }
        });

        resData.forEach((item, index) => {
          item.insuredId = item.memberId;
          item.insuredName = item.memberName;

          // 高亮新增的用户
          if (this.focusPatientId) {
            if (item.insuredId === this.focusPatientId) {
              this.familyIndex = index;
              if (this.familyIndex > 5) {
                this.familyScrollLeft = this.familyIndex * 140 + 'rpx'; // 140 = 96+44
              }
            }
          }
          // sex 1男  0为女
          if (item.sex === 1) {
            // 只有父母和子女需要区分性别
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
            }
          } else {
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
            }
          }
          // 如果是本人的话，则使用微信头像
          if (item.relation === 1) {
            item.src = this.userInfo.avatarUrl || item.src;
          }
        });

        this.familyList = resData;

        // console.log('familyList:', this.familyList);
      });
    }
  }
};
</script>
<style>
.uni-btn-v button {
  border: none !important;
}
button:after {
  border: none !important;
}
page {
  background: linear-gradient(#f96a6a, #fd8c8f);
}
</style>
<style lang="scss" scoped>
.assessIndex {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 100rpx;
  .top {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    padding: 56rpx;
    padding-right: 180rpx;
    position: relative;
    .logoMan {
      position: absolute;
      right: 0;
      bottom: 0;
      img {
        width: 160rpx;
        height: 160rpx;
      }
    }
    .bgImg {
      position: absolute;
      right: 0;
      bottom: -320rpx;
      img {
        width: 398rpx;
        height: 520rpx;
      }
    }
  }
  .bigBox {
    background-color: #fff;
    margin: 0 24rpx 24rpx 24rpx;
    border-radius: 38rpx;
    position: relative;
    z-index: 2;
    .family-wrapper {
      padding-top: 20rpx;
      .title {
        text-align: center;
        margin-top: 20rpx;
      }
      .family {
        width: 700rpx;
        background: #fff;
        margin: auto;
        // border-radius: 24rpx;
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;

        position: relative;
        padding-top: 10rpx; // 为了是让  family-content的圆角显示完整，要不然会有被切掉的感觉
        z-index: 0;

        .family-bg-red {
          overflow-x: scroll;
          box-sizing: border-box;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 90rpx;
        }
        .family-content {
          // border-radius: 24rpx;
          border-top-left-radius: 24rpx;
          border-top-right-radius: 24rpx;
          padding: 32rpx 24rpx 0rpx;
          margin: auto;
          z-index: 100;
          position: relative;
          box-sizing: border-box;
          height: 218rpx;
          overflow-y: hidden;
          ::-webkit-scrollbar {
            width: 0 !important;
          }
          .family-line {
            width: 100%;
            height: 1rpx;
            background: #f60;
            position: absolute;
            left: 0;
            bottom: 0rpx;
          }
        }
        // .family-bg-white {
        //   height: 20rpx;
        //   position: relative;
        //   z-index: 100;
        //   background: white;
        //   width: 100%;
        //   display: none;
        // }
        .scroll-view_H {
          height: 220rpx;
          // overflow: visible;
        }
        .f-inner {
          display: flex;
          align-items: flex-end;
          width: max-content;
          padding-right: 80rpx;
          width: 100%;
          height: 188rpx;
          $inActiveWidth: 96rpx;
          $activeWidth: 120rpx;

          .f-item {
            width: $inActiveWidth;
            margin-right: 44rpx;
            position: relative;
            &.active {
              width: $activeWidth;

              .f-logo {
                width: $activeWidth;
                height: $activeWidth;
                border-radius: $activeWidth;
                border: 6rpx solid #f60 !important;
              }
            }
            .f-logo {
              width: $inActiveWidth;
              height: $inActiveWidth;
              background: white;
              border-radius: $inActiveWidth;
              padding: 0rpx;
              box-sizing: border-box;
              overflow: visible;
              position: relative;
              background: #e3524b;
              // &.f-logo0 {
              //   background: none;
              //   border-radius: 16rpx;
              //   padding: 0;
              // }
              &.f-logo-self {
                border: 1px solid #e9f8ff;
              }
              &.f-b-imgw-boy {
                background: #e9f8ff;
              }
              &.f-b-imgw-girl {
                background: #ffefef;
              }
              .f-logo-img {
                width: 100%;
                height: 100%;
                border-radius: inherit;
              }
              .f-logo-img-icon {
                position: absolute;
                width: 80rpx;
                height: 32rpx;
                left: 50%;
                transform: translateX(-50%);
                bottom: -16rpx;
              }
            }
            .f-name {
              width: 100%;
              text-align: center;
              margin-top: 10rpx;
              font-size: 28rpx;
              height: 36rpx;
              line-height: 36rpx;
              border-radius: 36rpx;
              color: black;
              padding: 5rpx 0rpx;
              &.active {
                background: #f60;
                color: white;
                font-weight: bold;
              }
            }
            .f-san {
              position: absolute;
              left: 50%;
              width: 0rpx;
              height: 0rpx;
              width: 18rpx;
              height: 18rpx;
              outline: 2rpx solid #f60;
              transform: rotate(45deg) translateX(-50%);
              background: #f60;
              bottom: -14rpx;
            }
            .f-w-line {
              position: absolute;
              width: 8rpx;
              height: 10rpx;
              left: 50%;
              transform: translateX(-50%);
              background: white;
              bottom: -7rpx;
            }
          }
          .f-add {
            width: 96rpx;
            border-radius: 46rpx;
            margin-right: 40rpx;
            .f-a-btn {
              background: #f60;
              // background: rgba(255, 255, 255, 0.2);
              color: white;
              text-align: center;
              width: 96rpx;
              height: 96rpx;
              line-height: 96rpx;
              color: white;
              font-size: 72rpx;
              position: relative;
              border-radius: 96rpx;
              image {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 64rpx;
                height: 64rpx;
                transform: translate(-50%, -50%);
              }
            }
            .f-a-title {
              width: 100%;
              text-align: center;
              margin-top: 10rpx;
              font-size: 28rpx;
              height: 36rpx;
              line-height: 36rpx;
              border-radius: 36rpx;
              color: black;
            }
            .f-name {
              text-align: center;
              width: 100%;
              margin-top: 20rpx;
              color: rgba(255, 255, 255, 0.6);
            }
          }
        }
        .p-user {
          width: 100%;
          height: 88rpx;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          margin: auto;
          display: flex;
          align-items: center;
          border-top: 1px solid #e8e8e8;
          margin-top: -2rpx;
          .p-u-logo {
            width: 40rpx;
            height: 40rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .p-u-name {
            margin-left: 12rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.55);
          }
          .p-u-line {
            margin: 0px 24rpx;
            border-left: 1rpx solid #e8e8e8;
            width: 0;
            height: 32rpx;
            line-height: 32rpx;
          }

          .p-u-goods {
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.55);
          }
        }
      }
    }
    // .bigImg {
    //   text-align: center;
    //   padding: 46rpx 0;
    //   img {
    //     width: 612rpx;
    //     height: 746rpx;
    //   }
    // }
  }
}
.uni-btn-v {
  text-align: center;
  padding: 20rpx 0 20rpx 0;
  margin-top: 50rpx;
  button {
    width: 600rpx;
    height: 88rpx;
    border: 2rpx solid rgba(0, 0, 0, 0);
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    opacity: 1;
    border-radius: 44rpx;
    color: #fff;
    font-size: 36rpx;
  }
}
.uni-tip {
  width: 100%;
  text-align: center;
  padding-bottom: 40rpx;
}
</style>
